{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}Scrollable{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationtools/css/jquerytools/scrollable/scrollable.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/jquerytools/scrollable/scrollable.js') }}" type="text/javascript"></script>
	{# kostki nawigacyjne #}
	<script src="{{ asset('bundles/applicationtools/js/jquerytools/scrollable/scrollable.navigator.js') }}" type="text/javascript"></script>
	{# buttony nawigacyjne #}
	<script src="{{ asset('bundles/applicationtools/js/jquerytools/scrollable/scrollable.autoscroll.js') }}" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready( function(){
			$(".scrollable").scrollable({
				circular: true,
				onSeek: function() {
					// console.info(this.getIndex());
				}
			})
			.autoscroll({autoplay: true, interval: 1000})
			.navigator({idPrefix: 'a', history: true}).data("scrollable"); 	
			
			window.api = $(".scrollable").data("scrollable");
		});
	</script>

{% endblock %}

{% block body %}
<div class="section">
    <div class="grid_16">
        <h4>Scrollable - autoscroll</h4>
		
		<div>
			
			<a class="prev">prev</a>
			
			<div class="navi"></div>
			
			<div class="scrollable" style="width:130px">
				
				<div class="items">
					<div>0</div>  
					<div>1</div>  
					<div>2</div>  
					<div>3</div>  
					<div>4</div>
					<div>5</div>  
					<div>6</div>  
				</div>
				
			</div> 
			
			<a class="next">next</a>
			
		</div>

		<p>
			<button onclick='api.stop();'>stop</button>
			<button onclick='api.pause();'>pause</button>
			<button onclick='api.play();'>play</button>
		</p>
		
        
    </div>
    <div class="clear"></div>
</div>
{% endblock %}